<template>
  <div class="container">
    <!-- 点击预览的对话框 -->
    <el-dialog
      title="文章的预览"
      :visible="previewClose"
      width="50%"
      @close="previewClickClose"
    >
      <!--  -->
      <!-- 主体内容 -->
      <el-form ref="closeRef">
        <el-form-item>
          <h2>{{ article.title }}</h2>
        </el-form-item>
        <el-form-item>
          <div class="title">
            <span
              >{{ article.createTime| parseTimeByString('{y}-{m}-{d} {h}:{m}:{s}')}}
            </span>
            <span>{{ article.title }}</span>
            <i class="el-icon-view"></i>
            <span>{{ article.visits }}</span>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="content" v-html="article.articleBody"></div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { previewList } from '@/api/hmmm/articles'
export default {
  name: 'articlePreview',
  components: {},
  props: {
    previewClose: {
      type: Boolean,
      required: true
    },
    articleId: {
      type: Number || Object
    }
  },
  data() {
    return {
      article: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    // close事件
    previewClickClose() {
      // 关闭弹框
      this.$emit('update:previewClose', false)
      // 重置数据
      this.$refs.closeRef.resetFields()
    },
    async getEditId(ids) {
      this.$emit('update:previewClose', true)
      this.$emit('update:articleId', ids)
      try {
        const res = await previewList({ id: ids })
        // console.log(res)
        this.article = res.data
        //
        this.$message.success('预览成功')
      } catch (err) {
        this.$message.error('预览失败')
      }
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    line-height: 1;
    display: flex;
    span {
      padding: 0 8px;
    }
  }
  .content {
    margin-top: 10px;
    padding: 20px;
    height: 100%;
    width: 100%;
    border-top: 1px dashed #ccc;
    background: #f5f5f5;
  }
}
</style>
